<script setup>
import { ref } from "vue";
import { getClassListe, deleteClassDel } from "@/api/type";
import { Edit, Delete } from "@element-plus/icons-vue";
// 存储图书分类
const channel = ref([]);

// v-loading 是否加载
const loading = ref(false);

// 获取弹窗组件的dom元素
const dialog = ref(null);

const getChannel = async () => {
  loading.value = true;
  const res = await getClassListe();
  channel.value = res.data.data;
  loading.value = false;
};
getChannel();

// 添加文章分类
const onAddChannel = () => {
  // 显示弹窗
  dialog.value.open({});
};
// 编辑文章分类
const onEditChannel = (row) => {
  // 显示弹窗
  dialog.value.open(row);
};
// 删除文章分类
const onDeleteChannel = (row) => {
  ElMessageBox.confirm("你确认要删除吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteChannel(row);
      // 提示退出成功
      ElMessage.primary("删除成功");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消成功",
      });
    });
};

// 删除
const deleteChannel = async (row) => {
  const res = await deleteClassDel(row.id);
  // 重新渲染
  getChannel();
};

// 父组件监听 success 事件，进行调用回显
const success = () => {
  getChannel();
};
</script>

<template>
  <Card title="文章分类">
    <!-- 具名插槽--按钮 -->
    <template #extra>
      <el-button type="primary" @click="onAddChannel">添加分类</el-button>
    </template>
    <!-- 默认插槽--表格 -->
    <el-table :data="channel" style="width: 100%" v-loading="loading">
      <el-table-column label="序列" width="100" type="index" />
      <el-table-column prop="className" label="分类名称" />
      <el-table-column prop="classAlias" label="分类别名" />
      <el-table-column label="操作" width="130">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditChannel(row)"
          >
          </el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDeleteChannel(row)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- 空数据时 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
  </Card>

  <!-- 弹窗 -->
  <ChannelEdit ref="dialog" @success="success"></ChannelEdit>
</template>

<style lang="scss" scoped></style>
